import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { fetchChannelList } from '../store/modules/channelStore'
import ECharts from './echartInit'
import DescCard from './desc-card'
import { useSearchParams, useParams, useLocation } from 'react-router-dom'

function ChartList() {
  const [params] = useSearchParams()
  const name = params.get('name')
  const desc = params.get('desc')
  const paramsId = useParams()

  const state = useLocation().state
  console.log('state:11', state)

  const id = paramsId.id

  const { channelList } = useSelector(state => state.channel)
  const dispatch = useDispatch()
  //触发channelList异步请求执行
  useEffect(() => {
    dispatch(fetchChannelList())
  }, [dispatch])

  const option = {
    xAxis: {
      type: 'category',
      data: channelList.map(channel => channel.time),
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: channelList.map(channel => channel.data),
        type: 'line',
        smooth: true,
      },
    ],
  }
  useEffect(() => {
    // option.xAxis.data = channelList.map(channel=>channel.time)
    //option.series[0].data = channelList.map(channel=>channel.data)
  }, [channelList])

  return (
    <div>
      <div>{ECharts({ option })}</div>

      <DescCard desc={desc} name={name} id={id} />
    </div>
    //channelList.map((item,index)=><div key={index}>{item.data}</div>)
  )
}

export default ChartList
